<template>
  <div class="bbox">
    <div class="box2">
      <div class="title">《 活 - 动 - 回 - 执 》</div>
      <div class="flex">
        <el-form :model="formList" style="" ref="ruleFormRef" :rules="rules">
          <el-form-item prop="selectName">
            <el-select
              v-model="formList.selectName"
              class="m-2 input paddingb"
              placeholder="请选择店名"
              size="large"
              filterable
              remote
              :remote-method="remoteMethod"
              :loading="loading"
            >
              <el-option
                v-for="item in shopCode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="userName">
            <el-input
              v-model="formList.userName"
              placeholder="请输入姓名"
              class="input paddingb no-border"
            ></el-input>
          </el-form-item>
          <el-form-item prop="phone">
            <el-input
              v-model="formList.phone"
              placeholder="请输入电话"
              class="input paddingb"
            ></el-input>
          </el-form-item>
          <el-form-item prop="userType">
            <el-select
              v-model="formList.userType"
              class="m-2 input paddingb"
              placeholder="请选择参与方式"
            >
              <el-option
                v-for="item in userType"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button
              class="btn"
              type="primary"
              @click="handleFrom(ruleFormRef)"
              >提交</el-button
            >
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, reactive, watch } from "vue";
import { createUser, shoplistquery } from "../../utils/server/requst";
import { ElMessage } from "element-plus";
const loading = ref("");
const keyword = ref("");
const shopCode = ref([]);
const ruleFormRef = ref();
const rules = reactive({
  userName: [{ required: true, message: "姓名不能为空", trigger: "blur" }],
  selectName: [{ required: true, message: "店名不能为空", trigger: "blur" }],
});

const userType = [
  {
    value: "0",
    label: "商城现金积分",
  },
  {
    value: "1",
    label: "现金券",
  },
];
// 表单信息
const formList = reactive({
  selectName: "",
  userName: "",
  phone: "",
  userType: "",
});
const handlerSearch=(val)=>{
  let data = {
    carBrand: 0,
    name: val,
    pageSize:100,
  };
  shoplistquery(data).then((res) => {
    console.log(res);
    if (res.code == 200) {
      let datalist = res.data.list;
      if (datalist.length > 0) {
        const newlest = datalist.map((item) => {
          return {
            value: item.shopCode,
            label: item.name,
          };
        });
        shopCode.value = newlest;
      }
    }
  });
}
// 在挂载的时候调用函数渲染页面 
onMounted(() => {
  handlerSearch('')
});

async function handleFrom(formEl) {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      const data = {
        shopCode: formList.selectName,
        userName: formList.userName,
        userType: formList.userType,
        mobile: formList.phone,
        userChannel: "0",
      };
      console.log(data);
      let res = await createUser(data);
      if (res.code == 200) {
        ElMessage({
          type: "success",
          message: "提交成功",
        });
        resetForm();
      }
    } else {
      console.log("提交失败了", fields);
    }
  });
}
const remoteMethod = (query) => {
  if (query) {
    loading.value = true
    setTimeout(() => {
      loading.value = false
      handlerSearch(query)
    }, 200)
  } else {
    shopCode.value = []
  }
}
const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
}
</script>

<style scoped>
.bbox {
  /* background-color: red; */
  width: 100%;
  height: 100vh;
  background: url(../images/bg.jpg) no-repeat;
  background-size: 100% auto;
}

.box {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.flex {
  display: flex;
  flex-direction: column;
  width: 80%;
  margin: 0 auto;
}

.example-showcase .el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}

/* 去除下拉框黑框 */
:deep(:focus-visible) {
  outline: none;
}

.name {
  border: .0625rem solid #fee2a8;
  display: flex;
  align-items: center;
  padding: .625rem;
  width: 12.5rem;
  justify-content: space-between;
  border-radius: .125rem;
  color: #fee2a8;
}

.input {
  color: #fee2a8 !important;
  border: 1px solid #fee2a8;
  width: 100%;
  font-size: 1rem;
}

:deep(.el-input__wrapper) {
  border: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  height: 2.5rem;
}

:deep(.el-input__inner:focus) {
  outline: none;
  color: #fee2a8;
  border: none;
}

:deep(.el-input__inner) {
  outline: none;
  color: #fee2a8;
}

:deep(.is-focus) {
  outline: none;
}

.paddingb {
  margin-bottom: .9375rem;
}
/* 这里要用：deep（）不然报错 */
:deep(input::-webkit-input-placeholder) {
  color: #ccc;
  font-size: 1rem;
}

:v-deep(.el-button) {
  width: 100%;
  background-color: #fee2a8;
  border: none;
  color: #fff;
  height: 2.5rem;
}

.title {
  width: 80%;
  border-radius: 3.125rem;
  border: 1px solid #fee2a8;
  color: #fee2a8;
  box-sizing: border-box;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 1.25rem;
  font-size: 1.25rem;
  font-weight: bold;
  height: 2.5rem;
  line-height: 2.5rem;
}

.v-select {
  border: .0625rem solid #fee2a8;
}

.btn {
  margin: 0 auto;
  font-size: 1rem;
  background-color: rgb(254, 226, 168);
  border: none;
  color: #960b06;
  width: 12.5rem;
  font-weight: bold;
}
</style>
